<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级</title>
</head>
<body>

    <ol class="class-ordered-list"></ol>

    <script type="text/javascript">

        let classes = [{
            "name": "计算机一班",
            "students": [
                    { "id": 8526, "name": "秋香", "gender": "女" },
                    { "id": 9527, "name": "华安", "gender": "男" }
                ]
            }, {
            "name": "计算机二班",
            "students": [
                { "id": 6666, "name": "华文", "gender": "男" },
                { "id": 8888, "name": "华武", "gender": "男" }
            ]
        }];

        const classOrderedList = document.querySelector( '.class-ordered-list' );

        for( let i = 0 ; i < classes.length ; i++ ){
            let clazz = classes[ i ] ; // 获得数组中的下标i处的元素
            let classNameLi = document.createElement( 'li' );
            classNameLi.innerHTML = clazz.name ;

            let studentOrderedList = document.createElement( 'ol' );
            studentOrderedList.style.listStyleType = 'lower-roman';

            let stus = clazz.students ;
            for( let j = 0 ; j < stus.length ; j++ ){
                let stu = stus[ j ];

                let stuLi = document.createElement( 'li' );
                stuLi.innerHTML = stu.id + ' , ' + stu.name + ' , ' + stu.gender ;

                studentOrderedList.appendChild( stuLi);
            }

            classNameLi.appendChild( studentOrderedList );

            classOrderedList.appendChild( classNameLi );
        }
       
    </script>
    
</body>
</html>